.controllerBar{
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    padding: 0 .8rem;
    box-sizing: border-box;

    .controllerItem{
        height: auto;
        width: auto;
        padding: 0;
        margin: 0;
        background-color: transparent;
        color: var(--el-button-text-color);
        border: none;
        line-height: unset;
        font-size: 1rem;
        margin: .5rem 0;

        &>span{
            display: block;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 5rem;
            padding: .5rem 0;
            box-sizing: border-box;

            &.active{
                border-radius: .4rem;
                border: .05px solid var(--el-button-active-border-color);
                background-color: var(--el-button-active-bg-color);
            }
        }


        &:not(:first-child){
            margin-left: .8rem;
        }

        &:not(:last-child){
            margin-right: .8rem;
        }

        svg{
            height: 2.5rem;
            width: 2.5rem;
        }

        &:hover{
            &>span{
                // border: .05px solid var(--el-button-active-border-color);
                background-color: var(--el-button-active-bg-color);
            }
        }
    }

    /* 分割线 */
    .divider{
        height: 100%;
    }
}